import React from 'react';
import { PlusOutlined, DeleteOutlined, MenuOutlined, MenuFoldOutlined } from '@ant-design/icons';
import { Conversation } from '@/types/chat';

interface ConversationSidebarProps {
  collapsed: boolean;
  conversations: Conversation[];
  activeConversationId: string | null;
  onToggle: () => void;
  onNew: () => void;
  onSwitch: (id: string) => void;
  onDelete: (id: string, e: React.MouseEvent) => void;
}

const ConversationSidebar: React.FC<ConversationSidebarProps> = ({
  collapsed,
  conversations,
  activeConversationId,
  onToggle,
  onNew,
  onSwitch,
  onDelete,
}) => {
  return (
    <div className={`chat-sidebar-modern ${collapsed ? 'collapsed' : ''}`}>
      <div className="sidebar-header">
        <h3>对话历史</h3>
        <button className="toggle-btn" onClick={onToggle}>
          {collapsed ? <MenuOutlined /> : <MenuFoldOutlined />}
        </button>
      </div>

      <button className="new-chat-btn" onClick={onNew}>
        <PlusOutlined />
        {!collapsed && ' 新建对话'}
      </button>

      <div className="conversation-list">
        {conversations.map(conv => (
          <div
            key={conv.id}
            className={`conversation-item ${activeConversationId === conv.id ? 'active' : ''}`}
            onClick={() => onSwitch(conv.id)}
          >
            <div className="conversation-title">{conv.title}</div>
            <button className="delete-btn" onClick={(e) => onDelete(conv.id, e)}>
              <DeleteOutlined />
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ConversationSidebar;
